<!--
 * @Author: chenxiao
 * @Date: 2022-01-07 09:38:22
 * @LastEditors: chenxiao
 * @LastEditTime: 2022-02-15 16:53:28
-->
<template>
  <div class="inputBox">
    <input placeholder="请输入收费站名称" class="input" v-model="searchValue" @click="search" :readonly="$route.fullPath === '/newToll4'" clearable>
    <img @click.stop="$router.push('/searchResult')" class="searchInput" src="~@/assets/feeManage/searchInput.png" alt="">
    <img @click.stop="clear" class="clear" src="~@/assets/feeManage/clear.png" alt="" v-if="searchValue">
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'searchInput',
  props: ['clearInputValue', 'secondClickStatus'],
  computed: {
    ...mapState(['searchKeyWord'])
  },
  watch: {
    secondClickStatus: {
      handler(newvalue) {
        if (newvalue == true) {
          this.searchValue = '';
          this.$emit('changeClearInputStatus', {status: false})
        }
      }
    },
    // clearInputValue: {
    //   handler(newvalue) {
    //     if (newvalue == true) {
    //       this.searchValue = '';
    //       this.$emit('changeClearInputStatus', {status: false})
    //     }
    //   },
    //   immediate: true
    // },
    searchValue: {
      handler(newvalue) {
        if (!!newvalue) {
          newvalue = newvalue.replace(/\s*/g, "");
          // 给tabsTable组件，前20名和后20名可以选，但是是灰色的！不做高亮处理
          this.$emit('changeSetab', {index: ''})
        }
        // 给搜索结果页面searchResult.vue页面传，用来做数据列表筛选  
         this.$emit('getinputvalue', { getinputvalue: newvalue });
      }
    },
    // 这个地方，在searchResult.vue里面点击的搜索，当searchValue的值不是''， 给vuex，这个地方就是用来监听vuex里面的这个变化的，如果有数据了，就默认显示出来了！！！
    // 真麻烦啊！！！！
    searchKeyWord: {
      handler(newvalue) {
        this.searchValue = newvalue;
        // if (!!this.searchValue) { this.$emit('controlPage', {}) }
      }
    }
  },
  data() {
    return {
      searchValue: '',
      list: []
    }
  },
  methods: {
    clear() {
      this.searchValue = '';
      this.$store.commit('CHANGESEARCHKEYWORD', '');
      // 给tabsTable.vue的，默认前20名高亮，重新加载数据
      this.$emit('changeSetab', {index: 0})
      this.$emit('reloadData', {});
    },
    search() {
      if (this.$route.fullPath === '/searchResult') {
        return
      }
      this.$router.push('/searchResult')
    }
  }
}

</script>
<style scoped lang="less">
.inputBox {
  text-align: center;
  margin: 0.3rem;
  position: relative;

  .input {
    width: 100%;
    height: 0.64rem;
    background: #F6F6F6;
    border-radius: 0.12rem;
    font-size: 0.28rem;
    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
    font-weight: 400;
    color: #333333;
    line-height: 0.42rem;
    padding: 0 0.6rem;
  }

  .searchInput {
    width: 0.34rem;
    height: 0.34rem;
    position: absolute;
    top: 50%;
    left: 0.2rem;
    transform: translate(0, -50%);
  }

  .clear {
    width: 0.36rem;
    height: 0.36rem;
    position: absolute;
    top: 50%;
    right: 0.2rem;
    transform: translate(0, -50%);
    z-index: 99;
  }
}

</style>
